<template>
  <el-card shadow="never" class="table-container">
    <div class="flex justify-between items-center title">
      <div class="flex items-center">
        <strong>子类别过程能力趋势</strong>
        <el-button
          type="danger"
          circle
          size="small"
          class="ml-2"
          @click="$emit('remove', index)"
          style="text-align: center; width: 18px; height: 18px"
        >
          <div style="margin-left: 3px"><i-ep-minus /></div>
        </el-button>
      </div>
      <div class="text-[12px]">
        <div class="flex items-center">
          <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px] sj"
            >特殊送检</span
          >
          <el-select
            class="mr-[5px] sj_select"
            v-model="localSearchData"
            placeholder="请选择特性项"
            clearable
            filterable
            loading-text="加载中..."
            style="width: 130px"
            @change="handleSearchChange"
          >
            <el-option
              v-for="item in specialInspectionList"
              :key="item.id"
              :label="`${item.shaftSuffix}-${item.featureName}`"
              :value="item.shaftSuffix"
            />
          </el-select>
          <span class="c-[#838A9D] text-[13px] lh-[26px]! sj">节点数</span>
          <el-input
            v-model="localCount"
            placeholder="请输入"
            class="single_count_input"
            @keyup.enter="handleConfirm"
          >
            <template #append>
              <el-button :icon="Search" @click="handleConfirm" />
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 内容部分保持不变 -->
    <div v-if="loading" v-loading="true" class="w-full h-[300px]"></div>
    <div v-if="!loading && !chartData?.paramId">
      <el-empty description="暂无数据" />
    </div>
    <div v-if="chartData?.paramId">
      <pcmSpecialMonitorLineChart
        :key="Math.random().toString()"
        :id="Math.random().toString()"
        :count="localCount"
        :showName="false"
        :seacher="{ ...props.searchedParam, suffixType: localSearchData || '' }"
        :seriesData="chartData"
      />
      <div class="charts_des flex justify-center text-[14px] lh-[20px]">
        <div class="flex items-center">
          <div class="mr-4 flex items-center">
            Cpk
            <span class="circleOne" style="background-color: #4caf50"></span>
          </div>

          <div class="flex items-center">
            Ppk<span
              class="css-circle"
              style="width: 14px; height: 14px; border: 3px solid #4caf50"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { Search, Delete } from "@element-plus/icons-vue";
import {
  getMdmproductinfosApi,
  getMdmprojectinfosApi,
  getMdminspectiontoolApi,
  getSpecificListApi,
  getMdmProcessEquipApi,
  getMdmProcessProjectApi,
} from "@/utils/commonData";
import {
  getSingleDataMock,
  dataMock,
  attachDataMock,
  showLineValue,
  getLongDataApi,
  getStateDataApi,
  getSpecialDataApi,
  getSpecialTwoDataApi,
  getSpecialThreeDataApi,
} from "../index";
const props = defineProps({
  specialInspectionList: Array,
  index: Number,
  searchedParam: Object,
  keyId: Number,
});

const emit = defineEmits(["update", "remove"]);

// 本地状态管理
const localSearchData = ref("");
const localCount = ref(30);
const loading = ref(false);
const chartData = ref(null);

const handleConfirm = async () => {
  try {
    loading.value = true;
    // 这里调用数据获取逻辑
    // chartData.value = await fetchData(...)
    getchartData();
  } finally {
    loading.value = false;
  }
};

const handleSearchChange = () => {
  console.log(localSearchData.value);

  handleConfirm();
};

async function getchartData(type = 0) {
  if (!props.searchedParam?.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (localCount.value > 3000) return ElMessage.error("节点数量最大可查3000");

  if (type && !isPositiveInteger(localCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  // localSearchData.value = "";

  // localSearchData.value = props.specialInspectionList[0]?.id;
  chartData.value = {};
  loading.value = true;
  chartData.value =
    (await getSpecialDataApi({
      type: "3",
      specificId: props.searchedParam?.specificId,
      count: localCount.value,
      suffixType: `${localSearchData.value}`,
    })) || [];
  console.log("chartData.value", chartData.value);

  loading.value = false;

  // return new Promise(async (resolve, reject) => {
  //   chartData.value = {};
  //   loading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialFourCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: localCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       loading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   chartData.value = data;
  localCount.value = chartData.value.count
    ? chartData.value.count
    : localCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

// 监听父组件传入的 data 变化
watch(
  () => props.searchedParam,
  (newVal) => {
    if (props.searchedParam.specificId) {
      getchartData();
    } else {
      chartData.value = {};
    }
  },
  { deep: true }
);

onMounted(() => {
  // getchartData();
  if (props.specialInspectionList?.length > 0) {
    localSearchData.value = props.specialInspectionList[0]?.id;
  }
  if (props.searchedParam.specificId) {
    getchartData();
  }
  console.log(Number(Math.random() * 100));
});
</script>

<style scoped lang="scss">
.css-circle {
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
</style>
